<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    
	<head>
        <title>Cruce Peligroso Rock - Sitio web oficial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="Sitio web oficial de la banda de rock argentina Cruce Peligroso" />
        <meta name="keywords" content="cruce, peligroso, musica, albums, temas, discografia"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
		<link rel="stylesheet" href="css/skin.css" type="text/css" media="screen"/>
		<link href="css/jplayer.codrops.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="jquery/jquery-ui.min.js"></script>
		<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h2,h3,a',{
				textShadow: '1px 1px 1px #000000'
			});
		</script>
		<script type="text/javascript">
			$(function() {
				/**
				* Construye el carrusel para los albumes
				*/
				$('#mp_albums').jcarousel({
					scroll : 3
				}).children('li')
				  .bind('click',function(){
					// cuando se clickea en un album se muestra la información correspondiente y se oculta la del actual.
					var $this = $(this);
					$('#mp_content_wrapper').find('.mp_content:visible')
											.hide();
											
												$('#mp_content_wrapper')
												.find('.mp_content:nth-child('+ parseInt($this.index()+1) +')')
											    .fadeIn(1000);
											
			});

				/**  
				 * El reproductor de canciones
				 */
				// copia local de los selectores jQuery, para mejorar la performance.
				var jpPlayTime = $("#jplayer_play_time");
				var jpTotalTime = $("#jplayer_total_time");
				var $list 		= $("#jplayer_playlist ul");

				/**
				* Inicializa el reproductor
				*/
				$("#jquery_jplayer").jPlayer({
					oggSupport	: true,
					preload		:"auto"
				})
				.jPlayer("onProgressChange", 
					function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
					jpPlayTime.text($.jPlayer.convertTime(playedTime));
					jpTotalTime.text($.jPlayer.convertTime(totalTime));
				})
				.jPlayer("onSoundComplete", function() {
					playListNext();
				});

				/**
				* clickea en el botón de "previo", suena la canción anterior
				*/
				$("#jplayer_previous").bind('click', function(){
					playListPrev();
					$(this).blur();
					return false;
				});

				/**
				* clickea en el botón de "siguiente", suena la canción siguiente
				*/
				$("#jplayer_next").bind('click', function() {
					playListNext();
					$(this).blur();
					return false;
				});

				/**
				* suena la canción en la posición "i" de la lista de canciones
				*/
				function playSong(i){
					var $next_song 		= $list.find('li:nth-child('+ i +')');
					var mp3				= $next_song.find('.mp_mp3').html();
					var ogg				= $next_song.find('.mp_ogg').html();
					$list.find('.jplayer_playlist_current').removeClass("jplayer_playlist_current");
					$next_song.find('a').addClass("jplayer_playlist_current");
					$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
				}

				/**
				* suena la canción siguiente de la lista de canciones
				*/
				function playListNext() {
					var $list_nmb_elems = $list.children().length;
					var $curr 			= $list.find('.jplayer_playlist_current');
					var idx				= $curr.parent().index();
					var index 			= (idx < $list_nmb_elems-1) ? idx+1 : 0;
					playSong(index+1);
				}

				/**
				* suena la canción previa de la lista de canciones
				*/
				function playListPrev() {
					var $list_nmb_elems = $list.children().length;
					var $curr 			= $list.find('.jplayer_playlist_current');
					var idx				= $curr.parent().index();
					var index 			= (idx-1 >= 0) ? idx-1 : $list_nmb_elems-1;
					playSong(index+1);
				}
				
				/**
				* El usuario hace click en alguna de las canciones listadas del album.
				* Agrega el tema a la lista y lo hace sonar.
				*/
				function addFirst(song_idx,name,mp3,ogg) {
					$list.empty();
					/**
					* cada canción en la lista tiene:
					* - opciones para las acciones de cerrar / remover
					* - el directorio mp3
					* - el directorio ogg
					*/
					var song_html = "<a href='#' class='jplayer_playlist_current' tabindex='1'>" + name + "</a>";
					song_html 	 += "<span></span>";
					song_html 	 += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
					song_html 	 += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
					var $listItem = $("<li/>",{
						id			: song_idx,	
						className	: 'jplayer_playlist_current',
						html 		: song_html
					});
					$list.append($listItem);
					// evento para reproducir la canción cuando el usuario le hace click
					$listItem.find('a').bind('click',clickSong);
					// evento para remover la canción de la lista cuando el usuario hace click en el botón de remover
					$listItem.find('span').bind('click',removeSong);
					// comienza la reproducción de una canción
					$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
					jpTotalTime.show();
					jpPlayTime.show();
				}
				
				/**
				* Agrega la canción a la lista de reproducción si es que no está en la misma.
				* Si es la única, empieza a reproducirla.
				*/
				function addToPlayList(song_idx,name,mp3,ogg) {
					var $list_nmb_elems = $list.children().length;
					// si ya está en la lista retorna
					if($list.find('#'+song_idx).length)
						return;
					// clase para la canción actual que está siendo reproducida
					var c = '';
					if($list_nmb_elems == 0)
						c = 'jplayer_playlist_current';
					var song_html = "<a href='#' class="+c+" tabindex='1'>" + name + "</a>";
					song_html 	 += "<span></span>";
					song_html 	 += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
					song_html 	 += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
					var $listItem = $("<li/>",{
						id			: song_idx,	
						html 		: song_html
					});
					$list.append($listItem);
					// si es la única canción en lista empieza a reproducirla
					if($list_nmb_elems == 0){
						$("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
						jpTotalTime.show();
						jpPlayTime.show();
					}
					$listItem.find('a').bind('click',clickSong);
					$listItem.find('span').bind('click',removeSong);
				}
				
				/**
				* Remueve la canción de la lista de reproducción.
				* Si la canción removida es la que estaba sonando y hay otras canciones
				* en la lista, entonces comienza a reproducirse la siguiente.
				* Si no hay otras, detiene el reproductor y quita la barra de estado.
				* En caso contrario continua reproduciendo la canción que estaba siendo reproducida.
				*/
				function removeSong() {
					var $this 	= $(this); 
					var current = $this.parent().find('a.jplayer_playlist_current').length;
					$this.parent().remove();
					var $list_nmb_elems = $list.children().length;
					if($list_nmb_elems > 0 && current)
						playListNext();
					else if($list_nmb_elems == 0){
						$("#jquery_jplayer").jPlayer("clearFile");
						jpTotalTime.hide();
						jpPlayTime.hide();
					}	
					return false;
				}
				
				/**
				* El usuario hace click en una canción de la lista. Comienza a reproducirse.
				*/
				function clickSong() {
						var index = $(this).parent().index();
						playSong(index+1);
						return false;
				}
				
				/**
				* Los siguientes son los eventos cuando se clicke en los botones "reproducir" y "agregar a la lista"
				*/
				$('#mp_content_wrapper').find('.mp_play').bind('click',function(){
					var $this 		= $(this);
					var $paths		= $this.parent().siblings('.mp_song_info');
					var title   	= $paths.find('.mp_song_title').html();
					var mp3			= $paths.find('.mp_mp3').html();
					var ogg			= $paths.find('.mp_ogg').html();
					var album_id 	= $this.closest('.mp_content').attr('id');
					var song_index	= $this.parent().parent().index();
					var song_idx	= album_id + '_' + song_index;
					// agrega a la lista y reproduce la canción
					addFirst(song_idx,title,mp3,ogg);
				});
				$('#mp_content_wrapper').find('.mp_addpl').bind('click',function(){
					var $this 		= $(this);
					var $paths		= $this.parent().siblings('.mp_song_info');
					var title   	= $paths.find('.mp_song_title').html();
					var mp3			= $paths.find('.mp_mp3').html();
					var ogg			= $paths.find('.mp_ogg').html();
					var album_id 	= $this.closest('.mp_content').attr('id');
					var song_index	= $this.parent().parent().index();
					var song_idx	= album_id + '_' + song_index;
					// agrega a la lista y reproduce la canción si no hay otra en lista.
					addToPlayList(song_idx,title,mp3,ogg);
				});
				
				/**
				* Muestra en la imagen del album en botón de "reproducir" para escuchar el album completo
				*/
				$('#mp_content_wrapper').find('.mp_content').bind('mouseenter',function(){
					var $this 		= $(this);
					$this.find('.mp_playall').show();
				}).bind('mouseleave',function(){
					var $this 		= $(this);
					$this.find('.mp_playall').hide();
				});
				
				/**
				* Para escuchar el album completo, reproducimos la primer canción y todas las otras a la lista.
				* Escuchar la primer canción nos garantiza que la lista estaba vacía anteriormente.
				*/
				$('#mp_content_wrapper').find('.mp_playall').bind('click',function(){
					var $this 		= $(this);
					var $album		= $this.parent();
					$album.find('.mp_play:first').trigger('click');
					$album.find('.mp_addpl').trigger('click');
				})
				
				/**
				* Las canciones de la lista pueden ser reordenadas.
				*/
				$list.sortable();
				$list.disableSelection();
				
			});
		</script>
        <style>
			.reference{
				font-family:Arial;
				position:relative;
				width:100%;
				font-size:12px;
				text-transform:uppercase;
				text-align:center;
			}
			.reference a{
				color:#f9f9f9;
				text-decoration:none;
				margin-right:20px;
			}
		</style>
    </head>
	
    <body>
    	<div id="header" align="center">
    		<img src="images/logo.png"></img>
    	</div>	
    	<div id="menu">
				<a class="menuItem" href="index.htm" onmouseout="" onmouseover="">Home</a>
				<a class="menuItem" href="#" onmouseout="" onmouseover="">M&uacute;sica</a>
				<a class="menuItem" href="fotos.html" onmouseout="" onmouseover="">Fotos</a>
				<a class="menuItem" href="videos.html" onmouseout="" onmouseover="">Videos</a>
				<a class="menuItem" href="contacto.html" onmouseout="" onmouseover="">Contacto</a>
		</div>
		<div class="mp_wrapper">
			<div id="mp_content_wrapper" class="mp_content_wrapper">
				<!--Primer album-->
				<div class="mp_content" id="c_album_1">
					<img src="música/canilla_libre/album.jpg" alt="album1"/>
					<a href="#" class="mp_playall">Play all</a>
					<div class="mp_description">
						<h2>Canilla libre</h2>
						<p>
							Recording began in 2009 and and we finally finished this album in the
							end of this month. Strings of Freedom is our acoustic achievement. We dedicate
							it to all our families and friends. Its about living freely and enjoy life.
						</p>
					</div>
					<div class="mp_songs">
						<div>
							<h3>Angelito y el diablito</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">Angelito y el diablito</span>
								<span class="mp_mp3">música/canilla_libre/Angelito_y_el_diablito.mp3</span>
								<span class="mp_ogg">música/canilla_libre/Angelito_y_el_diablito.ogg</span>
							</div>
						</div>
						<div>
							<h3>Herederos</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">Herederos</span>
								<span class="mp_mp3">música/canilla_libre/Herederos.mp3</span>
								<span class="mp_ogg">música/canilla_libre/Herederos.ogg</span>
							</div>
						</div>
						<div>
							<h3>Identidad parecida</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">Identidad parecida</span>
								<span class="mp_mp3">música/canilla_libre/Identidad parecida.mp3</span>
								<span class="mp_ogg">música/canilla_libre/Identidad parecida.ogg</span>
							</div>
						</div>
						<div>
							<h3>Las notas de la libertad</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">Las notas de la libertad</span>
								<span class="mp_mp3">música/canilla_libre/Las notas de la libertad.mp3</span>
								<span class="mp_ogg">música/canilla_libre/Las notas de la libertad.ogg</span>
							</div>
						</div>
						<div>
							<h3>Morticia</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">Morticia</span>
								<span class="mp_mp3">música/canilla_libre/Morticia.mp3</span>
								<span class="mp_ogg">música/canilla_libre/Morticia.ogg</span>
							</div>
						</div>
					</div>
				</div>
				<!--fin del primer album-->
				
				<!--Segundo album-->
				<div class="mp_content" id="c_album_2" style="display:none;">
					<img src="música/estudio_acustico_en_vivo/album.jpg" alt="album2"/>
					<a href="#" class="mp_playall">Play all</a>
					<div class="mp_description">
						<h2>Estudio + acústico</h2>
						<p>
							Experimental sounds for enjoying life and music as it comes. This album was inspired by the great
							Eduardo MacGregor who experimented with double sided guitars to achieve a unique sound experience.
							Time to shine wants to make people shine.
						</p>
					</div>
					<div class="mp_songs">
						<div>
							<h3>100 vueltas</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">100 vueltas</span>
								<span class="mp_mp3">música/estudio_acustico_en_vivo/100 vueltas.mp3</span>
								<span class="mp_ogg">música/estudio_acustico_en_vivo/100 vueltas.ogg</span>
							</div>
						</div>
						<div>
							<h3>xl</h3>
							<div class="mp_options">
								<span class="mp_play">Play</span>
								<span class="mp_addpl">Add to playlist</span>
							</div>
							<div class="mp_song_info" style="display:none;">
								<span class="mp_song_title">xl</span>
								<span class="mp_mp3">música/estudio_acustico_en_vivo/xl.mp3</span>
								<span class="mp_ogg">música/estudio_acustico_en_vivo/xl.ogg</span>
							</div>
						</div>
					</div>
				</div>
				<!--fin del segundo album-->
			</div>
			
			<div class="mp_player">
				<div id="jquery_jplayer"></div>
				<div class="jp-playlist-player">
					<div class="jp-interface">
						<ul class="jp-controls">
							<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
							<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
							<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
							<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
							<li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
							<li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1">previous</a></li>
							<li><a href="#" id="jplayer_next" class="jp-next" tabindex="1">next</a></li>
						</ul>
						<div class="jp-progress">
							<div id="jplayer_load_bar" class="jp-load-bar">
								<div id="jplayer_play_bar" class="jp-play-bar"></div>
							</div>
						</div>
						<div id="jplayer_volume_bar" class="jp-volume-bar">
							<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
						</div>
						<div id="jplayer_play_time" class="jp-play-time"></div>
						<div id="jplayer_total_time" class="jp-total-time"></div>
					</div>
					<div id="jplayer_playlist" class="jp-playlist"><ul></ul></div>
				</div>
			</div>
			<ul id="mp_albums" class="mp_albums jcarousel-skin">
				<li><img src="música/canilla_libre/thumb.jpg" alt="album1" /></li>
				<li><img src="música/estudio_acustico_en_vivo/thumb.jpg" alt="album2" /></li>
			</ul>
		</div>
        <div class="reference">
			<a href="">By Juan Alejandro Fausd</a>
		</div>

    </body>
</html>